/* eslint-disable */
<template>
    <div class="device-card-inner" :class="{ selected: isSelected }" :style="{ width: cardWidth }">
        <span v-if="isSelected" class="selected-triangle" />
        <div class="device-card-content">
            <div class="device-info">
                <a-tooltip>
                    <template #title>
                        <div v-html="tooltipContent" />
                    </template>
                    <a-icon type="desktop" class="device-icon" :style="{ color: isOnline ? '#1890ff' : '#bfbfbf' }" />
                </a-tooltip>
                <span class="device-name" :style="{ color: isOnline ? '#1890ff' : '#bfbfbf' }">{{ deviceTitle }}</span>
                <span class="device-type" :style="{ color: isOnline ? '#1890ff' : '#bfbfbf' }">({{ device.gatewayType }})</span>
            </div>
            <div v-if="isSelected" class="device-actions">
                <!-- 需要悬浮图标上时，需要使用a-tooltip -->
                <a-tooltip title="导出设备">
                    <a-icon type="export" @click.stop="$emit('export')" />
                </a-tooltip>
                <a-tooltip title="编辑设备">
                    <a-icon type="edit" @click.stop="$emit('edit')" />
                </a-tooltip>
                <a-tooltip title="删除设备">
                    <a-icon type="delete" @click.stop="$emit('delete')" />
                </a-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DeviceCard',
    props: {
        device: Object,
        isSelected: {
            type: Boolean,
            default: false
        },
        isOnline: {
            type: Boolean,
            default: false
        },
        cardWidth: {
            type: String,
            default: '280px'
        },
        tooltipContent: {
            type: String,
            default: ''
        }
    },
    computed: {
        deviceTitle() {
            // 优先使用 title，如果没有则使用 name
            return this.device?.title || this.device?.name || '未知设备'
        }
    }
}
</script>

<style scoped>
.device-card-inner {
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 200px;
    position: relative;
}
.selected-triangle {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 20px solid #1890ff;
    border-right: 20px solid transparent;
    z-index: 2;
    display: block;
}
.device-card-inner.selected {
    border: 2px solid #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}
.device-card-content {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 36px;
}
.device-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.device-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.device-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.device-type {
    font-size: 12px;
    flex-shrink: 0;
}
.device-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.device-actions .anticon {
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: #666;
    transition: all 0.2s ease;
}
.device-actions .anticon:hover {
    background-color: #f0f0f0;
    color: #1890ff;
}
.device-actions .anticon[type="delete"]:hover {
    color: #ff4d4f;
}
</style> 